@extends('layouts.header')
@section('title','选择柜机')
<div class="cabinetOne" id="cabinetTwo">
    <div class="wk">
        <div class="nk">
            <div class="cabinetOneTitle">选择柜门</div>
            <div class="ZYcabinet" num="{{$grips->count()}}">
                <div class="itemList">
                    @foreach($grips as $grip)
                        <div class="item">
                            <div class="itemNum">
                                <p>{{$grip->grip_number}}</p>
                                <div gripId="{{$grip->id}}" num="{{$grip->grip_number}} "
                                     @if($grip->HumanStatus=='满') class="man"
                                     @else class="empty" @endif>{{$grip->HumanStatus}}</div>
                            </div>
                            <div class="tianchong"></div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="" style="margin-top: 70px;">
                <button id="submit_href"
                        style="width: 300px;height: 45px;border: none;outline:none;display: block;background: #f56c36;border-radius: 22.5px;margin: 0 auto;color: #FFF;font-size: 16px;">
                    确认绑定
                </button>
            </div>
        </div>
    </div>

</div>
@push('js')
    <script>
        var obj = new MyOjb();

        function MyOjb() {
            this.grid = null;
        }

        $("#gridList .items").click(function () {
            var num = $(this).attr("data-num");
            obj.grid = num;
            $(this).addClass("active").siblings().removeClass("active");
        });
        $("#cabinetTwo .itemNum div").click(function () {
            var this_ = this;
            var index = $("#cabinetTwo .item").index($(this).parents(".item"));
            var grip = $(this).attr("grips");
            var clsName = $(this).prop("className");
            $("#cabinetTwo .item").eq(index).find(".itemNum .empty").css("background-color", "#c4c4c4");

            if (clsName != "man") {
                mui.confirm("确认选择此格口？", "提示", ["取消", "确认"], function (res) {
                    if (res.index == 1) {
                        obj.grid = $(this_).attr("gripId");
                    }
                });
            }
        });
        $("#submit_href").click(function () {
            window.location.href ="{{route('user.deposit',['chestId'=>$chest['id']])}}&gripId=" +obj.grid;
        });
    </script>
@endpush
